<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="${pageContext.request.contextPath }/admin/assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="${pageContext.request.contextPath }/admin/css/style.css"/>       
        <link href="${pageContext.request.contextPath }/admin/assets/css/codemirror.css" rel="stylesheet">
        <link rel="stylesheet" href="${pageContext.request.contextPath }/admin/assets/css/ace.min.css" />
        <link rel="stylesheet" href="${pageContext.request.contextPath }/admin/assets/css/font-awesome.min.css" />
		<script src="${pageContext.request.contextPath }/admin/assets/js/jquery.min.js"></script>
		<script src="${pageContext.request.contextPath }/admin/assets/js/jquery-2.1.1.min.js"></script>
		<script src="${pageContext.request.contextPath }/admin/assets/js/bootstrap.min.js"></script>

		<script type="text/javascript">
			window.jQuery || document.write("<script src='"+${pageContext.request.contextPath }+"/admin/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='"+${pageContext.request.contextPath }+"/admin/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script src="../assets/js/typeahead-bs2.min.js"></script>
		<!-- page specific plugin scripts -->
		<script src="${pageContext.request.contextPath }/admin/assets/js/jquery.dataTables.min.js"></script>
		<script src="${pageContext.request.contextPath }/admin/assets/js/jquery.dataTables.bootstrap.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/H-ui.js"></script> 
        <script type="text/javascript" src="${pageContext.request.contextPath }/admin/js/H-ui.admin.js"></script> 
        <script src="${pageContext.request.contextPath }/admin/assets/layer/layer.js" type="text/javascript" ></script>
        <script src="${pageContext.request.contextPath }/admin/assets/laydate/laydate.js" type="text/javascript"></script>
		<title>人员列表</title>
	</head>

	<body>
		<div class="page-content clearfix">
		    <div id="Member_Ratings">
		      <div class="d_Confirm_Order_style">
		     <!---->
		     <div class="border clearfix">
		       <span class="l_f">
		        <button class="btn btn-xs btn-info"  data-toggle="modal" data-target="#myModal1"'><i class="icon-plus"></i>添加用户</button>
		       </span>
		       <span class="r_f">共：<b>${staffsSize }</b>条</span>
		     </div>
		     <!---->
		     <div class="table_menu_list">		     
		       <table class="table table-striped table-bordered table-hover" id="sample-table">
				<thead>
				 <tr>
					<th width="80">ID</th>
					<th width="100">用户名</th>
					<th width="70">性别</th>  
					<th width="120">手机</th>   
					<th width="120">身份证号</th>   
					<th width="70">职位</th>                   
					<th width="250">操作</th>
				</tr>
				</thead>
			<tbody>
				<s:iterator value="#request.staffs">
				<tr>
		          <td>${staffId }</td>
		          <td>${staffName }</td>
		          <td>${staffSex }</td>
		          <td>${staffPhone }</td>
		          <td>${staffCarid }</td>
		          <td>${posit.positName }</td>
		          <td class="td-manage">
		          <button class="btn btn-xs btn-info"  data-toggle="modal" data-target="#myModal" data-orderid="${posit.positId }"><i class="icon-edit bigger-120"></i></button> 
		          <a title="删除" href="deleteStaff?staffId=${staffId }" onclick="javascript:return confirm('您确认要删除');" class="btn btn-xs btn-warning" ><i class="icon-trash  bigger-120"></i></a>
		          </td>
				</tr>
				</s:iterator>
		      </tbody>
			</table>
		   </div>
		  </div>
		 </div>
		</div>
	
	<!-- 修改模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
	       <div class="modal-content">
	          <div class="modal-header">
	              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	              <h4 class="modal-title">修改人员信息</h4>
	          </div>
	          <form action="${pageContext.request.contextPath }/selectStaff" method="post">
	          <div class="modal-body">
	             <div class="planel_boxs">
	                 <div class="row"> 
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label>人员编号:</label>
	                         <input type="text" class="form-controls content" name="staffId" id="id"/>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label>用&nbsp;户 &nbsp;名:</label>
	                         <input type="text" class="form-controls content" name="staffName" id="name"/>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</label>
	                         <input type="text" class="form-controls identify" name="staffSex" id="sex" />
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label> 移动电话:</label>
	                         <input type="text" class="form-controls identify" name="staffPhone" id="Telephone"/>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label> 身份证号:</label>
	                         <input type="text" class="form-controls identify" name="staffCarid" id="SF"/>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:</label>
							<span class="select-box"> 
								<select id="tes1" name="posit.positId" class="select">
									<option>请选择</option>
									<s:iterator value="#request.posits">
									<option value="${positId }">${positName }</option>
									</s:iterator>
								</select>
							</span>
	                     </div>
	                </div>  
	            </div>
	        </div>
	        <div class="modal-footer text-center">    
	           <input type="submit" onclick="javascript:return confirm('您确认要修改');" class="btn btn-default btn_blue" value="修改"/>
	           <button type="button" class="btn btn-default btn_red" data-dismiss="modal">取消</button>
	        </div>
	        </form>
	      </div>
	   </div>
	</div>
	<!-- 模态框 -->
	<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
	       <div class="modal-content">
	          <div class="modal-header">
	              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	              <h4 class="modal-title">添加人员信息</h4>
	          </div>
	          <form action="${pageContext.request.contextPath }/addStaff" method="post">
	          <div class="modal-body">
	             <div class="planel_boxs">
	                 <div class="row"> 
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label>用&nbsp;户 &nbsp;名:</label>
	                         <input type="text" class="form-controls content" name="staffName"/>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label> 移动电话:</label>
	                         <input type="text" class="form-controls identify" name="staffPhone"/>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label> 身份证号:</label>
	                         <input type="text" class="form-controls identify" name="staffCarid"/>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:</label>
							<span class="select-box"> 
								<select id="tes" name="posit.positId" class="select">
									<option>请选择</option>
									<s:iterator value="#request.posits">
									<option value="${positId }">${positName }</option>
									</s:iterator>
								</select>
							</span>
	                     </div>
	                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
	                         <label>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</label>
	                         <label><input name="staffSex" type="radio" value="男" checked="checked"><span class="lbl">男</span></label>&nbsp;&nbsp;&nbsp;
						     <label><input name="staffSex" type="radio" value="女"><span class="lbl">女</span></label>&nbsp;&nbsp;&nbsp;
						</div>
	                </div>  
	            </div>
	        </div>
	        <div class="modal-footer text-center">    
	           <input type="submit" class="btn btn-default btn_blue" value="添加"/>
	           <button type="button" class="btn btn-default btn_red" data-dismiss="modal">取消</button>
	        </div>
	        </form>
	      </div>
	   </div>
	</div>
	
	<script>
	
		/*用户-编辑*/
		$('#myModal').on('show.bs.modal', function (event) {
		      var btnThis = $(event.relatedTarget); //触发事件的按钮
		      var modal = $(this);  //当前模态框
		      var modalId = btnThis.data('id');   //解析出data-id的内容
		      var content = btnThis.closest('tr').find('td').eq(0).text();
		      modal.find('#id').val(content);     
		      var content = btnThis.closest('tr').find('td').eq(1).text();
		      modal.find('#name').val(content);     
		      var content = btnThis.closest('tr').find('td').eq(2).text();
		      modal.find('#sex').val(content);   
		      var content = btnThis.closest('tr').find('td').eq(3).text();
		      modal.find('#Telephone').val(content);   
		      var content = btnThis.closest('tr').find('td').eq(4).text();
		      modal.find('#SF').val(content);  
		      var content1 = $(event.relatedTarget).data('orderid');
		      modal.find("#tes1 option[value='"+content1+"']").attr("selected","selected");
		});

		//模糊查询
		$("#query").click(function(){	
			var name=$("#Fuzzy_query").val();
			 $.ajax({
				url:'#',
				data:"name="+name,
				type:'post',
				dataType:'json',
				success:function(mag){						
					if(mag==1){							
						alert("修改成功");	
						location.href="#";
					}else{							
						alert("修改失败");							
					}						
				},error:function(){
					alert("ajax有误!");		
				}			
			});			
		});
	
	</script>
	</body>
</html>
<script type="text/javascript">
	jQuery(function($) {
			var oTable1 = $('#sample-table').dataTable( {
			"aaSorting": [[ 0, "desc" ]],//默认第几个排序
			"bStateSave": true,//状态保存
			"aoColumnDefs": [
			    {"orderable":false,"aTargets":[5,6]}// 制定列不参与排序
			] } );
			$('table th input:checkbox').on('click' , function(){
				var that = this;
				$(this).closest('table').find('tr > td:first-child input:checkbox')
				.each(function(){
					this.checked = that.checked;
					$(this).closest('tr').toggleClass('selected');
				});
					
			});	
			$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();
		
				var off2 = $source.offset();
				var w2 = $source.width();
		
				if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
				return 'left';
			}
		})
</script>